<script type="text/x-template" id="ai-task-list">
    <div>
        <avue-crud :option="option"
                   :data="tableData"
                   :page="page"
                   ref="crud"
                   width="290"
                   @search-change="handleSearch"
                   @refresh-change="handleRefresh"
                   @size-change="handleSize"
                   @current-change="handlePageChange"
                   @current-row-change="handleRowClick"
                   @search-reset="handleReset"
        >
            <template slot="dynamic_cover_url" slot-scope="scope" >
                <el-button type="text" icon="el-icon-view" class="copy-btn" @click="startVideoPlayDialog(scope.row)"></el-button>
            </template>
            <template slot="poster" slot-scope="scope" >
                <el-button type="primary" size="mini" @click="reviewPic(scope.row)">原始图片</el-button>
                <el-button class="rls-btn" type="primary" size="mini" @click="reviewRlsPoster(scope.row)" :disabled="scope.row.media_id == 0">智能海报</el-button>
            </template>
            <template slot="video_url" slot-scope="scope" >
                <div>
                    <el-input
                            v-model="scope.row.video_url"
                            disabled></el-input>
                    <el-button type="text" icon="el-icon-copy-document" class="copy-btn" @click="handleCopyData(scope.row.video_url)"></el-button>
                </div>
            </template>

        </avue-crud>

        <poster-show-dialog  v-if="posterDialogVisible" :id="currentId" @close="closeRlsPosterDialog">

        </poster-show-dialog>
        <el-dialog title="预览" :visible.sync="picDialogVisible" width="50%"  append-to-body>
          <span class="pics">
            <img referrerpolicy="no-referrer" :src="reviewPicUrl" alt="图片" max-width="500">
          </span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="picDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="picDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <video-play-dialog  v-if="videoPlayDialogVisible" :data="videoPlay"
                            @close="closeVideoPlayDialog"></video-play-dialog>
    </div>
</script>

<script>
    STATE=[
        {
            label: '执行成功',
            value: 4
        },
        {
            label: '排队中',
            value: 1
        },
        {
            label: '正在执行',
            value: 2
        },
        {
            label: '执行异常',
            value: 0
        }
    ]
    Vue.component('ai-task-list', {
        template: '#ai-task-list',
        data: function () {
            return {
                videoPlay:{poster: '',video:[]},
                videoPlayDialogVisible: false,
                selectedLabel: undefined,
                showLabelSelector: false,
                posterDialogVisible: false,
                videoLabelData: {},
                videoLabelList:[],
                posterUrlList: [],
                posterInfoList: [],
                searchForm: {},
                pagination: {},
                selected: [],
                selectionType: 'multiple',
                urls: {
                    //分页数据接口
                    pageList: '/v1/aiPoster/taskPageList.html',
                    listRlsLabel: '/v1/aiPoster/listRlsLabel.html',
                    listRlsPoster: '/v1/aiPoster/listRlsPoster.html',
                    getVideoTypes: '/v1/aiPoster/getVideoTypes.html'
                },
                loading: true,
                picDialogVisible: false, // 预览图片弹出框
                reviewPicUrl: null,
                reviewDynamicPicUrl: null,
                tableLoading: false,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                tableData: [],
                option:{
                    index: false,
                    page:true,
                    align:'center',
                    menu: false,
                    menuAlign:'center',
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    column:[
                        {
                            label:'自增ID',
                            prop:'id',
                            width:'100',
                            search: true,
                            visdiplay: false
                        },
                        {
                            label:'影片ID',
                            prop:'video_id',
                            width:'120',
                            span: 24,
                            search: true
                        },
                        {
                            label:'影片标题',
                            prop:'video_name',
                            width:'120',
                            span: 24,
                            search: true
                        },
                        {
                            label:'默认海报',
                            prop:'static_cover_url',
                            type:'upload',
                            span: 24,
                            listType:'picture-img'
                        },
                        {
                            label:'精彩片段',
                            prop:'dynamic_cover_url',
                            slot:true
                        },
                        {
                            label:'海报',
                            prop:'poster',
                            slot:true
                        },
                        {
                            label:'任务执行状态',
                            prop:'state',
                            type:'select',
                            search: true,
                            dicData: STATE

                        },{
                            label:'原视频',
                            prop:'video_url',
                            slot:true
                        },
                        {
                            label:'备注',
                            prop:'remark',
                            span:24
                        },
                        {
                            label:'视频类型',
                            prop:'video_type',
                            type:'select',
                            search: true

                        },
                        {
                            label:'耗时/s',
                            prop:'cost_time',
                            search: true
                        }
                    ]
                },
                currentId: undefined
            };
        },
        created: function () {

        },
        methods: {
            selectLabelStart() {
                if (this.currentId == undefined) {
                    this.$message('加载标签选择对话框异常')
                }
                this.loadRlsLabel(this.currentId)
                this.showLabelSelector = true
            },
            startVideoPlayDialog(row){
                var clips = row.clips
                if (!clips){
                    this.$message({
                        showClose: true,
                        message: '没有相关片段',
                        type: 'info'
                    })
                }else {
                    this.videoPlay.poster =  row.static_cover_url
                    this.videoPlay.video= this.convertClips(clips)
                    this.videoPlayDialogVisible = true
                }

            },
            convertClips(clips){
                var urls = clips.split(",")
                var size = urls.length
                var i=0
                var video = []
                for (; i < size; i++){
                    var url = urls[i]
                    var item = {}
                    item.type = 'video/mp4'
                    if (url && url.indexOf('.flv') > 0){
                        item.type = 'video/x-flv'
                    }
                    item.url = url
                    video.push(item)
                }
                return video
            },
            closeVideoPlayDialog(){
                this.videoPlay.poster = ''
                this.videoPlay.video= []
                this.videoPlayDialogVisible = false
            },
            closeRlsPosterDialog() {
                this.currentId = undefined
                this.posterDialogVisible = false
            },

            handleSelectLabel(label) {
                this.selectedLabel = label
                this.loadRlsPoster(this.currentId, label)
                this.showLabelSelector = false
            },

            resetForm() {
                this.$refs.searchForm.resetFields();
                this.page.currentPage = 1
                this.page.pageSize = 10
            },
            reviewPic(row) {
                this.reviewPicUrl = row.static_cover_url
                this.reviewDynamicPicUrl = row.dynamic_cover_url
                this.picDialogVisible = true
            },
            reviewRlsPoster(row) {
                if(row.state != 4 ){
                    this.$message('任务没有执行完成')

                }
                if(!row.media_id){
                    this.$message('任务对应的视频ID不能为空')
                }
                id = row.media_id
                this.currentId = id
                this.posterDialogVisible = true
            },

            handleSearch: function (searchForm,done) {
                this.searchForm = searchForm;
//                this.tableLoading = true;
                var searchParams = this.getSearchParams(searchForm);
                searchParams.page = this.page.currentPage;
                searchParams.rows = this.page.pageSize;
                this.ajax(this.urls.pageList, searchParams
                        , function (data) {
                            if (data.code === '0') {
                                this.tableData = data.data.rows
                                this.page.total = data.data.total
                                this.tableLoading = false
                            } else {
                                this.tableData = [];
                                this.tableLoading = false;
                            }
                        }.bind(this));
                if(done){
                    done()
                }
            },
            handleReset(){
                this.page.currentPage = 1;
                this.page.pageSize = 10;
            },
            handleRefresh(){
                var _this = this;
                _this.tableLoading = true;
                _this.ajax(_this.urls.pageList, {
                    page: 1
                }, function (data) {
                    if (data.code === '0') {
                        _this.tableData = data.data.rows
                        _this.page = {
                            total: data.data.total,
                            currentPage: 1, // 当前页数
                            pageSize: 10 // 每页显示多少条
                        }
                        _this.tableLoading = false
                        _this.$message({
                            showClose: true,
                            message: '刷新成功',
                            type: 'success'
                        })
                    } else {
                        _this.tableData = [];
                        _this.tableLoading = false;
                    }
                });
            },
            handleSize(pageSize) {
                this.page.pageSize = pageSize;
                this.handleSearch(this.searchForm);
            },
            handlePageChange(currentPage) {
                this.page.currentPage = currentPage;
                this.handleSearch(this.searchForm);
            },
            handleRowClick(currentRow){
//                        this.reviewPicUrl = currentRow.poster_url
//                        this.picDialogVisible = true
            },
            loadPageData() {
                this.tableLoading = true;
                this.ajax(this.urls.pageList, {}, function (data) {
                    if (data.code === '0') {
                        this.tableData = data.data.rows
                        this.page.total = data.data.total
                        this.tableLoading = false

                    } else {
                        this.tableData = [];
                        this.tableLoading = false;
                    }
                }.bind(this));
            },
            loadVideoTypes(){
                this.ajax(this.urls.getVideoTypes, {}, function (data) {
                    if (data.code === '0') {
                        // 视频类型的列
                        this.option.column[9].dicData = data.data
                    }
                }.bind(this));
            }
        }
        ,
        mounted: function () {
            this.loadPageData()


        },
        created() {
            this.loadVideoTypes()
        }
    })
</script>

<style>
    .pics img {
        max-width: 500px;
        max-height: 500px;
    }
    .copy-btn{
        position: absolute,
        top: 2px,
        right: 0

    }

    .rls-btn{
        margin-top: 5px;
    }

</style>